<template>
  <view class="container">
    <uni-card>
      <!-- 搜索区域 -->
      <view class="uni-search">
        <uni-search-bar
          v-model="queryParams.ipaddr"
          placeholder="请输入登录地址"
          @confirm="handleQuery"
        />
      </view>
      
      <!-- 操作按钮区域 -->
      <view class="uni-group">
        <button type="warn" @click="handleClean" size="mini" class="action-btn delete-btn">清空</button>
      </view>

      <!-- 列表区域 -->
      <uni-list>
        <uni-list-item v-for="(item, index) in logininforList" :key="index"
          :title="item.userName"
          :note="item.loginTime"
          :rightText="item.status === '0' ? '成功' : '失败'"
          clickable
          @click="handleDetail(item)"
        >
          <template v-slot:footer>
            <view class="button-group">
              <button class="action-btn delete-btn" @click.stop="handleDelete(item)">删除</button>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-card>

    <!-- 登录日志详情弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :title="title"
        mode="base"
        :before-close="true"
        @close="closeDialog"
      >
        <scroll-view scroll-y class="detail-scroll">
          <view class="detail-content">
            <view class="detail-item">
              <text class="label">用户名称：</text>
              <text class="value">{{ form.userName }}</text>
            </view>
            <view class="detail-item">
              <text class="label">登录地址：</text>
              <text class="value">{{ form.ipaddr }}</text>
            </view>
            <view class="detail-item">
              <text class="label">登录地点：</text>
              <text class="value">{{ form.loginLocation }}</text>
            </view>
            <view class="detail-item">
              <text class="label">浏览器：</text>
              <text class="value">{{ form.browser }}</text>
            </view>
            <view class="detail-item">
              <text class="label">操作系统：</text>
              <text class="value">{{ form.os }}</text>
            </view>
            <view class="detail-item">
              <text class="label">登录状态：</text>
              <text class="value">{{ form.status === '0' ? '成功' : '失败' }}</text>
            </view>
            <view class="detail-item">
              <text class="label">登录时间：</text>
              <text class="value">{{ form.loginTime }}</text>
            </view>
            <view class="detail-item" v-if="form.msg">
              <text class="label">提示消息：</text>
              <text class="value wrap-text">{{ form.msg }}</text>
            </view>
          </view>
        </scroll-view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { listLogininfor, delLogininfor, cleanLogininfor } from '@/api/system/log'

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 登录日志表格数据
      logininforList: [],
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        ipaddr: undefined,
        userName: undefined,
        status: undefined
      },
      // 表单参数
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      listLogininfor(this.queryParams).then(response => {
        this.logininforList = response.rows;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.form = row;
      this.title = "登录日志详情";
      this.$refs.popup.open();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      uni.showModal({
        title: '提示',
        content: '是否确认删除该登录日志?',
        success: res => {
          if (res.confirm) {
            delLogininfor(row.infoId).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            })
          }
        }
      });
    },
    /** 清空按钮操作 */
    handleClean() {
      uni.showModal({
        title: '提示',
        content: '是否确认清空所有登录日志?',
        success: res => {
          if (res.confirm) {
            cleanLogininfor().then(() => {
              this.getList();
              this.$modal.msgSuccess("清空成功");
            })
          }
        }
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.$refs.popup.close();
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}
.uni-search {
  padding: 10rpx 0;
}
.uni-group {
  margin: 20rpx 0;
  display: flex;
  justify-content: flex-end;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
}

/* 通用按钮样式 */
.action-btn {
  min-width: 80px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  padding: 0 15px;
  margin: 0;
  color: #fff;
  border: none;
}

/* 删除按钮样式 */
.delete-btn {
  background-color: #dd524d;
}
.delete-btn:active {
  background-color: #c13e39;
}

.detail-scroll {
  max-height: 60vh;
  width: 100%;
}

.detail-content {
  padding: 20rpx;
}

.detail-item {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.detail-item .label {
  font-weight: bold;
  margin-bottom: 5rpx;
  color: #606266;
}

.detail-item .value {
  color: #333;
  word-break: break-all;
}

.wrap-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

:deep(.uni-popup .uni-popup__wrapper) {
  width: 90%;
  max-width: 600px;
}

:deep(.uni-popup-dialog) {
  width: 100%;
  max-height: 80vh;
}
</style> 